<template>
  <section>
      <div class="bii-box-section">
        
        <div class="tab-nav">
            <div @click="handleType('date')" class="item" :class="{'active':(listQuery.type=='date')}">今天</div>
            <div @click="handleType('week')" class="item" :class="{'active':(listQuery.type=='week')}">本周</div>
            <div @click="handleType('month')" class="item" :class="{'active':(listQuery.type=='month')}">本月</div>
            <div @click="handleType('jidu')" class="item" :class="{'active':(listQuery.type=='jidu')}">本季度</div>
            <div @click="handleType('year')" class="item" :class="{'active':(listQuery.type=='year')}">本年度</div>
        </div>
        <el-row :gutter="20" style="margin-top:20px;">
          <el-col :span="6">
              <el-card class="box-card box">
                  提交审核商品
                  <p class="value">
                      {{ form.submitProductNum }}
                  </p>
              </el-card>
          </el-col>
          <el-col :span="6">
              <el-card class="box-card box">
                  审核通过商品
                  <p class="value">
                      {{ form.auditProductNum }}
                  </p>
              </el-card>
          </el-col>
          <el-col :span="6">
              <el-card class="box-card box">
                  待结算金额
                  <p class="value">
                      <span class="currency">￥</span>{{ form.waitSettleMoney }}
                  </p>
              </el-card>
          </el-col>
          <el-col :span="6">
              <el-card class="box-card box">
                  已结算金额
                  <p class="value">
                      <span class="currency">￥</span>{{ form.settledMoney }}
                  </p>
              </el-card>
          </el-col>

          <el-col :span="16" style="margin-top:20px;">
              <el-card class="box-card">
                  <v-chart autoresize :options="incomeReport"/>
              </el-card>
          </el-col>
      </el-row>
      </div>
  </section>
</template>

<script>
    import ECharts from 'vue-echarts/components/ECharts'
    import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/component/title'
    import 'echarts/lib/component/polar'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/legend'
    import {
        admin_summary,
        admin_dashboard
    } from '../../api/user';
export default {
        components: {
            'v-chart': ECharts
        },
  data() {
    return {
      incomeReport: {
        title: {
            text: '收入趋势'
        },
        color: ['#1990FF', '#3DCCCC'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['本月', '上个月']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '本月',
                type: 'line',
                stack: '销量',
                data: []
            },
            {
                name: '上个月',
                type: 'line',
                stack: '销量',
                data: []
            },
        ]
    },
      form: {
        auditProductNum: 0,
        submitProductNum: 0,
        waitSettleMoney: 0,
        settledMoney: 0,
      },
      listQuery: {
        type: "month"
      }
    };
  },
  mounted() {
  },
  created() {
    this.getData();
    this.getDashboard();
  },

  methods: {
    handleType(type) {
        this.listQuery.type = type;
        this.getData();
    },
    toSend() {
      this.$router.push("/order_send") 

    },
    getData() {
      admin_summary(this.listQuery).then((res)=>{
          this.form.auditProductNum = res.data.auditProductNum;
          this.form.submitProductNum = res.data.submitProductNum;
          this.form.waitSettleMoney = res.data.waitSettleMoney;
          this.form.settledMoney = res.data.settledMoney;
      }).catch((err)=>{

      })
    },
    getDashboard() {
      admin_dashboard().then((res)=>{
        this.incomeReport.xAxis.data = res.data.income.day;
        this.incomeReport.series[0].data = res.data.income.valueMonth;
        this.incomeReport.series[1].data = res.data.income.valueOfLastMonth;
      }).catch((err)=>{

      })
    }
  }
};
</script>
<style lang="scss" scoped>

    .bii-box-section {
        .echarts {
            width: 100%;
        }

        .text {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;

            .num {
                color: #F4222D;
              font-size: 42px;
              line-height: 42px;
              position: relative;
              margin: 0 2px;
              font-weight: 400;
              text-decoration: underline;
            }
        }
        .box {
            text-align:center;
            font-size: 14px;
            color: rgb(153, 153, 153);
            font-weight: 700;

            .value {
                font-size: 28px;
                line-height: 33px;
                color: #F4222D;
                height:33px;
                
                .currency {
                    font-size:14px;
                }
            }

            .value3 {
                font-size: 28px;
                line-height: 33px;
                color: #000000;
                height:33px;
                
                .currency {
                    font-size:14px;
                }
            }
        }
    }
  </style>
